<template>
    <div class="HomePage">
        <div class="HomeTopBox">
            <div class="TopBox">
                <h1 class="homeTitle">特&nbsp;产&nbsp;直&nbsp;达</h1>
                <div class="line"></div>
                <div class="englishName">DirectProduct</div>
            </div>
            <div class="next"></div>
        </div>
        <vue-waterfall-easy :imgsArr="imgsArr" @scrollReachBottom="getData">
            <div class="img-info" slot-scope="props">
                <p class="some-info">{{props.value.info}}</p>
                <div class="position">
                    <img src="../../assets/directProduct/position.png" alt="">
                    <span>青城山</span>
                    <img class="zan" src="../../assets/directProduct/zan.png" alt="">
                </div>
            </div>
        </vue-waterfall-easy>
    </div>
</template>

<script>
import axios from '../../axios'
import vueWaterfallEasy from 'vue-waterfall-easy'
export default {
  name: 'HomePage',
  components: {
    vueWaterfallEasy
  },
  props: {
    gap: {
      type: Number,
      default: 20
    },
    timeOut: {
      type: Number,
      default: 500
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data () {
    return {
      imgsArr: [],
      ImgDataGet: []
    }
  },
  methods: {
    sleep (d) {
      return new Promise((resolve) => setTimeout(resolve, d))
    },
    getData () {
      var data = []
      axios.get('/preview/listRecommendFood').then((res) => {
        for (var i = 0; i < res.data.length; i++) {
          data.push({ id: i, src: `https://study.s1.natapp.cc/QingchengTravel/${res.data[i].foodPic}`, link: 'https:/', info: res.data[i].foodName })
        }
        this.imgsArr = data
      }).catch(function (err) {
        console.log(err)
      })
    },
    initImgsArr (data) { // 初始化图片数组的方法，把要加载的图片装入
      var arr = []
      console.log(data.length)
      for (var i = 0; i < data.length; i++) {
        arr.push({ id: i, src: `https://study.s1.natapp.cc/QingchengTravel/${this.imgsArr[i].foodPic}.jpg`, link: 'https:/', info: '一些图片描述文字' })
        // src为加载的图片的地址、link为超链接的链接地址、
        // info为自定义的图片展示信息，请根据自己的情况自行填写
      }
      console.log('---------------')
      console.log(arr)
      return arr
    },
    fetchImgsData () { // 获取新的图片数据的方法，用于页面滚动满足条件时调用
      this.imgsArr = this.imgsArr.concat(this.fetchImgsArr) // 数组拼接，把下一批要加载的图片放入所有图片的数组中
    }
  },
  created () {
    this.getData()
    this.sleep(10000)
    console.log(this.imgsArr)
  }
}
</script>

<style scoped lang="scss">
    .HomePage{
        width: 100%;
        height: auto;
        min-height: calc(100vh);
        background: #fff;
        padding-bottom: 1px;
        .clear {
            clear: both;
        }
        .HomeTopBox{
            width: 750px;
            height: 1350px;
            padding-top: 125px;
            background: url("../../assets/directProduct/header.png") no-repeat;
            background-size: 100% 100%;
            .TopBox {
                width: 232px;
                height: .9rem;
                margin: 2.6rem 5.3rem;
                color: #ffffff;
                font-weight: normal;
                font-stretch: normal;
                line-height: 33.3px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                .name{
                    font-family: MicrosoftYaHei;
                    font-size: 33.3px;
                    letter-spacing: 1.3px;
                }
                .englishName{
                    font-family: MyriadPro-Regular;
                    font-size: 25px;
                    letter-spacing: 0.5px;
                }
                .line{
                    position: relative;
                    top: 18px;
                    width: 244px;
                    border-bottom: 5px #fff solid;
                }
                .englishName{
                    top: 26px;
                    position: relative;
                    font-size: 34px;
                }
            }
            .next{
                height: 90px;
                width: 178px;
                position: absolute;
                top: 1100px;
                left: 282px;
                display: flex;
                -webkit-box-orient: vertical;
                background: url("../../assets/directProduct/next.png") no-repeat;
            }
        }
        .vue-waterfall-easy-container{
            height: 1000px;
            .img-info{
               height: 100px;
               font-size: 30px;
               font-weight: bolder;
               background-color: #f0f0f0;
            }
            .some-info{
                width: 100%;
                position: relative;
                text-align: center;
            }
            .position{
                height: 25px;
                position: relative;
                left:14px;
                width:100%;
                .zan{
                    position: relative;
                    float: right;
                    top: 0.233333rem;
                    margin-right:35px;
                }
            }
            .position img{
                width: 20px;
            }
            .position span{
                font-size: 13px;
                font-weight: normal;
                margin:0px 2%;
                position: relative;
                top: 4px;
            }
        }
        .vue-waterfall-easy {
            position: relative;
            width: 100%;
            height: 500px;
            }
        .img-box {
            display: inline-block;
            width: 50%;
            box-sizing: border-box;
            float: left;
            transition: left 1s, top 1s;
        }
        .img-inner-box {
            box-shadow: 0 1px 3px rgba(0, 0, 0, .3);

        }
        .img-wraper {
            width: 100%;
            background: yellow;
        }
        img {
            width: 100%;
            vertical-align: bottom;
        }
        .vue-waterfall-easy-container   .vue-waterfall-easy-scroll{

            overflow-y: auto !important;
        }
    }
</style>